<template lang="html">
    <div class="show">
        <p class="icon">
            <img src="http://imgcdn.xuxian.com/upload/2016/03/31/20160331085543372_400_300.jpg">
        </p>
        <div class="detail">
            <ul>
                <li>进口红提</li>
                <li>来自国外的清香甜蜜红地球</li>
                <li>会员价:￥<i>8.99</i>/份</li>
                <li>非会员价:￥9.99/份</li>
            </ul>
            <p>规格 : <span>约300g</span></p>
        </div>
        <p>商品详情<img src="../assets/rightt.png"></p>
        <div class="balance">
            <p>
                <span class="jian" @click="jianClick()">-</span>
                <b class="num">1</b>
                <span class="jia" @click="jiaClick()">+</span>
            </p>
            <p>加入购物车</p>
        </div>
        <p class="btn"><a href="javascript:history.go(-1)"><img src="../assets/close.png"></a><img src="../assets/fx.png"></p>
    </div>
</template>
<script>
    export default{
      data (){
        return{
          showData:[],
          showNum:0
        }
      },
      methods:{
      	  jianClick:function () {
              this.showNum=this.showNum-1;
          },
          jiaClick:function () {
            this.showNum=this.showNum+1;
          }
      }

    }
</script>
<style lang="css">
    .show{
        width: 100%;
        height: 100%;
      font-size: .8rem;
    }
    .show .icon{
        width: 100%;
        height: 13rem;
        border-bottom: 0.05rem solid;
    }
    .show .icon img{
        width: 100%;
        height: 11rem;
    }
    .show .detail{
      margin-top: .5rem;
        height: 8rem;
        padding-left:1rem;
    }
    .detail ul{
        border-bottom: .05rem solid;
    }
    .detail ul li{
        height: 1.5rem;
        line-height: 1.5rem;
    }
    .detail li:nth-of-type(2){
        color: grey;
        font-size:.7rem;
        height:1rem;
        line-height:1rem;
    }
    .detail li:nth-of-type(3){
        background: url("../assets/c_font_bg.png") no-repeat left center;
        color: red;
        height: 2rem;
        line-height: 2rem;
    }
    .detail li:nth-of-type(3) i{
      font-weight: bolder;
      font-size: 1rem;
      line-height: 2rem;
    }
    .detail p{
        height:2rem;
        line-height: 2rem;
    }
    .detail p span{
        color: #e00000;
    }
    .show>p:nth-of-type(2){
        height: 2rem;
        background: #d9d9d9;
        line-height: 2rem;
        text-indent: .5rem;
      padding: 0.0005rem;
    }
    .show>p:nth-of-type(2) img{
        float: right;
        margin-top: 0.5rem;
    }
    .show .btn{
        width: 100%;
        height: 1.2rem;
        position: absolute;
        top: 1rem;
    }
    .show .btn img{
        width: 2rem;
        height: 2rem;
        margin-left:1rem;
    }
    .show .btn a{
        float: left;
    }
    .show .btn img:last-of-type{
        float: right;
        margin-right: 1rem;
    }
    .show .balance{
        width: 100%;
        height: 2.5rem;
        position: fixed;
        bottom: 0;
        z-index: 20;
        background: #fff;
    }
    .show .balance P:nth-of-type(1){
        float: left;
        width: 70%;
    }
    .balance p:nth-of-type(2){
        float: right;
        width: 30%;
        background: red;
        color: white;
        line-height: 2.5rem;
        text-align: center;
    }
    .balance span{
        display: inline-block;
        width: 1.7rem;
        height: 1.7rem;
        border: .05rem solid;
        margin:0.3rem 0.5rem;
        font-size: 2rem;
        line-height: 1.4rem;
        text-align: center;
        font-weight: bold;
    }
    .balance b{
        font-size: 1.5rem;
        color: black;
    }
</style>
